import { Button, Card, Form, FormInstance, Input, Radio, Upload, UploadFile } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import React, { useEffect, useRef, useState } from "react";
import { RcFile, UploadProps } from "antd/lib/upload";
import { fileUpload, postCircleFriend } from "@/redux/modules/circleFriend/action";
import useMessage from "@/hooks/useMessage";
import styles from "./index.module.less";
import { addWork, updateWork } from "@/redux/modules/work/action";
import { useSelector } from "react-redux";
import { RootState } from "@/redux";

interface PropsType {
	type?: string;
	visible?: boolean;
	onComfirm?: () => void;
}

const WorkAdd: React.FC<PropsType> = props => {
	const { type, visible } = props;

	const { contextHolder, success } = useMessage();

	const { TextArea } = Input;

	const [fileList, setFileList] = useState<UploadFile[]>([]);

	const handleUpload = async () => {
		const formData = new FormData();
		fileList.forEach(file => {
			formData.append("file", file as RcFile);
		});
		// setUploading(true);
		const res = await fileUpload(formData);
		return res;
	};

	const uploadProps: UploadProps = {
		onRemove: file => {
			const index = fileList.indexOf(file);
			const newFileList = fileList.slice();
			newFileList.splice(index, 1);
			setFileList(newFileList);
		},
		beforeUpload: file => {
			setFileList([...fileList, file]);
			return false;
		},
		fileList
	};

	const workDetail = useSelector((state: RootState) => state.work.workDetail);
	const formRef = useRef<FormInstance | null>(null);

	useEffect(() => {
		if (type) {
			formRef.current?.resetFields();
		}
	}, [workDetail, fileList]);

	useEffect(() => {
		formRef.current?.setFieldsValue({
			work_title: "",
			work_des: "",
			work_url: "",
			fileList: ""
		});
	}, [visible]);

	const onFinish = async (values: any) => {
		let files;
		if (fileList.length > 0) files = await handleUpload();
		const form = {
			...values,
			work_image: files ? (files as any)?.images[0]?.imageUrl : type ? workDetail.work_image : ""
		};
		if (type) {
			updateWork({ ...form, id: workDetail.id });
		} else {
			addWork(form);
		}
		props.onComfirm && props.onComfirm();
		success("发布成功");
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<Form
				ref={formRef}
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 16 }}
				layout="horizontal"
				onFinish={onFinish}
				initialValues={workDetail}
			>
				<Form.Item label="标题" rules={[{ required: true }]} name="work_title">
					<Input />
				</Form.Item>
				<Form.Item label="描述" rules={[{ required: true }]} name="work_des">
					<TextArea rows={4} />
				</Form.Item>
				<Form.Item label="地址" rules={[{ required: true }]} name="work_url">
					<Input />
				</Form.Item>
				<Form.Item label="文件" valuePropName="fileList">
					<Upload listType="picture-card" {...uploadProps}>
						<div>
							<PlusOutlined />
							<div style={{ marginTop: 8 }}>上传文件</div>
						</div>
					</Upload>
				</Form.Item>
				<Form.Item wrapperCol={{ offset: 4 }}>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
				</Form.Item>
			</Form>
		</div>
		// <Card>
	);
};

export default WorkAdd;
